<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.components.associatedPartModal.associatedParts')"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :minHeight="600"
      :width="1200"
    >
      <Row :gutter="24">
        <Col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
          <div style="overflow-y: scroll; overflow-x: hidden; height: 550px">
            <BasicTree :treeData="partData" :toolbar="true" :search="true" @select="selectPart" />
          </div>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
          <BasicTable @register="registerTable">
            <!-- 代号 -->
            <template #name="{ text: name }">
              <Row>
                <Col :span="22" class="text-ellipsis">
                  <span>{{ name }}</span>
                </Col>
                <Col :span="2">
                  <Icon icon="ion:ios-copy-outline" color="#7a7374" @click="handleCopy(name)" />
                </Col>
              </Row>
            </template>
            <!-- 状态 -->
            <template #state="{ text: state, record }">
              <span v-if="record.fileorpart === '1'">{{
                proxy.$filters.filterPartStatus(state)
              }}</span>
              <span v-else-if="record.fileorpart === '0'">{{
                proxy.$filters.filterDocumentStatus(state)
              }}</span>
            </template>
            <!-- 创建时间 -->
            <template #creattime="{ text: creattime }">
              <span>
                {{ proxy.$filters.filterTime(creattime) }}
              </span>
            </template>
            <!-- 文件/零件 -->
            <template #fileorpart="{ text: fileorpart }">
              {{
                fileorpart === '0'
                  ? t('routes.demo.partManager.file')
                  : t('routes.demo.partManager.part')
              }}
            </template>
            <!-- 是否为关联文件 -->
            <template #isshortcut="{ text: isshortcut }">
              {{ isshortcut === '0' ? t('common.no') : t('common.yes') }}
            </template>
          </BasicTable>
        </Col>
      </Row>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { ref, getCurrentInstance } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicTree } from '/@/components/Tree/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';

  import { getDirectoryLevel } from '/@/api/demo/document';
  import { getPartData } from '/@/api/demo/partManager';

  import { getPartColumns } from '../tableData';

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const { proxy }: any = getCurrentInstance();
  const partData = ref<any>([]);
  const selectedPartKey = ref<string>('');
  const partSuperId = ref<number>(1);
  const Association = ref<any>({
    folderid: null,
    oid: '',
  });
  const currentRecord = ref<any>({});

  const handleSubmit = () => {
    handleCancel();
  };

  const handleCancel = () => {
    partData.value = [];
    selectedPartKey.value = '';
    partSuperId.value = 1;
    Association.value.folderid = null;
    Association.value.oid = '';
    currentRecord.value = {};
    closeModal();
  };

  // 复制代号
  const handleCopy = (name) => {
    navigator.clipboard.writeText(name).then(() => {
      createMessage.success(t('common.copySuccessText'));
    });
  };

  // 选择目录
  const selectPart = (selectedKeys) => {
    selectedPartKey.value = selectedKeys[0];
    reload();
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({ confirmLoading: false });
    // 获取目录数据
    getDirectoryLevel(partSuperId.value).then((res) => {
      partData.value = res;
    });
  });

  // 初始化表格
  const [registerTable, { reload, setLoading }] = useTable({
    api: getPartData,
    beforeFetch: () => {
      return selectedPartKey.value;
    },
    rowSelection: {
      type: 'radio',
      onSelect: (record) => {
        Association.value.oid = record.id;
        currentRecord.value = record;
      },
    },
    columns: getPartColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    // pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    canResize: true,
    isTreeTable: true,
    childrenColumnName: 'sonpfi',
    rowKey: 'id',
  });
</script>

<style scoped></style>
